<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <button class="but1">点击</button>
    <ul>
        <li>这是li1</li>
        <li>这是li2</li>
        <li>这是li3</li>
        <li>这是li4</li>
        <li>这是li5</li>
    </ul>
    <script>
        // 标签对象.事件名（回调函数（事件对象）{}）
        // 其中回调函数是事件函数 会带有默认的event事件对象
        // jQuery的事件名称与js相比 少了on
        /*   $('.but1').click(function (e) {
              console.log('button被点击了', e);
          })
  
          $('.but1').mouseenter(function (e) {
              console.log('button被鼠标经过了', e)
          })
          $('.but1').mouseleave(function (e) {
              console.log('button鼠标离开了了', e)
          })
   */

        //  hover（callback1,callback2）悬停事件


        // 参数1 是鼠标移入时执行的函数
        // 参数2 是鼠标移出时执行的函数

        /*   $('.but1').hover(function(){
              console.log('鼠标移入了')
          },function(){
              console.log('鼠标移出')
          }) */

        /*    // 默认的，后创建标签不带有这个事件
           $('li').click(function () {
               console.log(this);//dom对象 当前点击的li标签
               console.log($(this).index()); // 获取当前标签的索引值
           }) */

        // 事件委托
        $('ul').on('click', 'li', function () {
            console.log('======')
        })

        // on() 添加一个监听事件
        $('but1').one('click', function () {
            console.log('事件只能执行一次');
        })
        var str = ''
        for (var i = 6; i < 10; i++) {
            str += '<li>这是li' + i + '</li>';
        }

        //  append()  在一个元素内追加一些子元素
        $('ul').append(str);
        // 将子元素追加在谁内
        $(str).appendTo('ul');

    </script>
</body>

</html>